define(['util', 'contextmenu', 'tpl'], function (util, contextmenu, tpl) {
    // design.js
    var isIE = (document.all) ? true : false;

    var dobj = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };

    var Class = {
        create: function () {
            return function () {
                this.initialize.apply(this, arguments);
            }
        }
    }

    var Extend = function (destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
    }

    var Bind = function (object, fun) {
        return function () {
            return fun.apply(object, arguments);
        }
    }
    var BindAsEventListener = function (object, fun) {
        var args = Array.prototype.slice.call(arguments).slice(2);
        return function (event) {
            return fun.apply(object, [event || window.event].concat(args));
        }
    }

    var CurrentStyle = function (element) {
        return element.currentStyle || document.defaultView.getComputedStyle(element, null);
    }

    function addEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
            oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = fnHandler;
        }
    };

    function removeEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.removeEventListener) {
            oTarget.removeEventListener(sEventType, fnHandler, false);
        } else if (oTarget.detachEvent) {
            oTarget.detachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = null;
        }
    };
//缩放程序
    var Resize = Class.create();
    Resize.prototype = {
        //缩放对象
        initialize: function (obj, options) {
            this._obj = obj.get(0);//缩放对象

            this._styleWidth = this._styleHeight = this._styleLeft = this._styleTop = 0;//样式参数
            this._sideRight = this._sideDown = this._sideLeft = this._sideUp = 0;//坐标参数
            this._fixLeft = this._fixTop = 0;//定位参数
            this._scaleLeft = this._scaleTop = 0;//定位坐标

            this._mxSet = function () {
            };//范围设置程序
            this._mxRightWidth = this._mxDownHeight = this._mxUpHeight = this._mxLeftWidth = 0;//范围参数
            this._mxScaleWidth = this._mxScaleHeight = 0;//比例范围参数

            this._fun = function () {
            };//缩放执行程序

            //获取边框宽度
            var _style = CurrentStyle(this._obj);
            this._borderX = (parseInt(_style.borderLeftWidth) || 0) + (parseInt(_style.borderRightWidth) || 0);
            this._borderY = (parseInt(_style.borderTopWidth) || 0) + (parseInt(_style.borderBottomWidth) || 0);
            //事件对象(用于绑定移除事件)
            this._fR = BindAsEventListener(this, this.Resize);
            this._fS = Bind(this, this.Stop);

            this.SetOptions(options);
            //范围限制
            this.Max = !!this.options.Max;
            this._mxContainer = $(this.options.mxContainer).get(0) || null;
            this.mxLeft = Math.round(this.options.mxLeft);
            this.mxRight = Math.round(this.options.mxRight);
            this.mxTop = Math.round(this.options.mxTop);
            this.mxBottom = Math.round(this.options.mxBottom);
            //宽高限制
            this.Min = !!this.options.Min;
            this.minWidth = Math.round(this.options.minWidth);
            this.minHeight = Math.round(this.options.minHeight);
            //按比例缩放
            this.Scale = !!this.options.Scale;
            this.Ratio = Math.max(this.options.Ratio, 0);

            this.onResize = this.options.onResize;

            this._obj.style.position = "absolute";
            !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");
        },
        //设置默认属性
        SetOptions: function (options) {
            this.options = {
                //默认值
                Max: false,//是否设置范围限制(为true时下面mx参数有用)
                mxContainer: "",//指定限制在容器内
                mxLeft: 0,//左边限制
                mxRight: 9999,//右边限制
                mxTop: 0,//上边限制
                mxBottom: 9999,//下边限制
                Min: false,//是否最小宽高限制(为true时下面min参数有用)
                minWidth: 50,//最小宽度
                minHeight: 50,//最小高度
                Scale: false,//是否按比例缩放
                Ratio: 0,//缩放比例(宽/高)
                onResize: function () {
                }//缩放时执行
            };
            Extend(this.options, options || {});
        },
        //设置触发对象
        Set: function (resize, side) {
            var fun;
            if (!resize) return;
            //根据方向设置
            switch (side.toLowerCase()) {
                case "up" :
                    fun = this.Up;
                    break;
                case "down" :
                    fun = this.Down;
                    break;
                case "left" :
                    fun = this.Left;
                    break;
                case "right" :
                    fun = this.Right;
                    break;
                case "left-up" :
                    fun = this.LeftUp;
                    break;
                case "right-up" :
                    fun = this.RightUp;
                    break;
                case "left-down" :
                    fun = this.LeftDown;
                    break;
                case "right-down" :
                default :
                    fun = this.RightDown;
            }
            ;
            //设置触发对象
            addEventHandler(resize.get(0), "mousedown", BindAsEventListener(this, this.Start, fun));
        },
        //准备缩放
        Start: function (e, fun, touch) {

            //防止冒泡(跟拖放配合时设置)
            e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
            //设置执行程序
            this._fun = fun;
            //样式参数值
            this._styleWidth = this._obj.clientWidth;
            this._styleHeight = this._obj.clientHeight;
            this._styleLeft = this._obj.offsetLeft;
            this._styleTop = this._obj.offsetTop;
            //四条边定位坐标
            this._sideLeft = e.clientX - this._styleWidth;
            this._sideRight = e.clientX + this._styleWidth;
            this._sideUp = e.clientY - this._styleHeight;
            this._sideDown = e.clientY + this._styleHeight;
            //top和left定位参数
            this._fixLeft = this._styleLeft + this._styleWidth;
            this._fixTop = this._styleTop + this._styleHeight;
            //缩放比例
            if (this.Scale) {
                //设置比例
                this.Ratio = Math.max(this.Ratio, 0) || this._styleWidth / this._styleHeight;
                //left和top的定位坐标
                this._scaleLeft = this._styleLeft + this._styleWidth / 2;
                this._scaleTop = this._styleTop + this._styleHeight / 2;
            }
            ;
            //范围限制
            if (this.Max) {
                //设置范围参数
                var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
                //如果设置了容器，再修正范围参数
                if (!!this._mxContainer) {
                    mxLeft = Math.max(mxLeft, 0);
                    mxTop = Math.max(mxTop, 0);
                    mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
                    mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
                }
                ;
                //根据最小值再修正
                mxRight = Math.max(mxRight, mxLeft + (this.Min ? this.minWidth : 0) + this._borderX);
                mxBottom = Math.max(mxBottom, mxTop + (this.Min ? this.minHeight : 0) + this._borderY);
                //由于转向时要重新设置所以写成function形式
                this._mxSet = function () {
                    this._mxRightWidth = mxRight - this._styleLeft - this._borderX;
                    this._mxDownHeight = mxBottom - this._styleTop - this._borderY;
                    this._mxUpHeight = Math.max(this._fixTop - mxTop, this.Min ? this.minHeight : 0);
                    this._mxLeftWidth = Math.max(this._fixLeft - mxLeft, this.Min ? this.minWidth : 0);
                };
                this._mxSet();
                //有缩放比例下的范围限制
                if (this.Scale) {
                    this._mxScaleWidth = Math.min(this._scaleLeft - mxLeft, mxRight - this._scaleLeft - this._borderX) * 2;
                    this._mxScaleHeight = Math.min(this._scaleTop - mxTop, mxBottom - this._scaleTop - this._borderY) * 2;
                }
                ;
            }
            ;
            //mousemove时缩放 mouseup时停止
            addEventHandler(document, "mousemove", this._fR);
            addEventHandler(document, "mouseup", this._fS);
            if (isIE) {
                addEventHandler(this._obj, "losecapture", this._fS);
                this._obj.setCapture();
            } else {
                addEventHandler(window, "blur", this._fS);
                e.preventDefault();
            }
            ;
        },
        //缩放
        Resize: function (e) {
            //清除选择
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            //执行缩放程序
            this._fun(e);
            //设置样式，变量必须大于等于0否则ie出错
            with (this._obj.style) {
                width = this._styleWidth + "px";
                height = this._styleHeight + "px";
                top = this._styleTop + "px";
                left = this._styleLeft + "px";
            }
            //附加程序
            this.onResize();
        },
        //缩放程序
        //上
        Up: function (e) {
            this.RepairY(this._sideDown - e.clientY, this._mxUpHeight);
            this.RepairTop();
            this.TurnDown(this.Down);
        },
        //下
        Down: function (e) {
            this.RepairY(e.clientY - this._sideUp, this._mxDownHeight);
            this.TurnUp(this.Up);
        },
        //右
        Right: function (e) {
            this.RepairX(e.clientX - this._sideLeft, this._mxRightWidth);
            this.TurnLeft(this.Left);
        },
        //左
        Left: function (e) {
            this.RepairX(this._sideRight - e.clientX, this._mxLeftWidth);
            this.RepairLeft();
            this.TurnRight(this.Right);
        },
        //右下
        RightDown: function (e) {
            this.RepairAngle(
                e.clientX - this._sideLeft, this._mxRightWidth,
                e.clientY - this._sideUp, this._mxDownHeight
            );
            this.TurnLeft(this.LeftDown) || this.Scale || this.TurnUp(this.RightUp);
        },
        //右上
        RightUp: function (e) {
            this.RepairAngle(
                e.clientX - this._sideLeft, this._mxRightWidth,
                this._sideDown - e.clientY, this._mxUpHeight
            );
            this.RepairTop();
            this.TurnLeft(this.LeftUp) || this.Scale || this.TurnDown(this.RightDown);
        },
        //左下
        LeftDown: function (e) {
            this.RepairAngle(
                this._sideRight - e.clientX, this._mxLeftWidth,
                e.clientY - this._sideUp, this._mxDownHeight
            );
            this.RepairLeft();
            this.TurnRight(this.RightDown) || this.Scale || this.TurnUp(this.LeftUp);
        },
        //左上
        LeftUp: function (e) {
            this.RepairAngle(
                this._sideRight - e.clientX, this._mxLeftWidth,
                this._sideDown - e.clientY, this._mxUpHeight
            );
            this.RepairTop();
            this.RepairLeft();
            this.TurnRight(this.RightUp) || this.Scale || this.TurnDown(this.LeftDown);
        },
        //修正程序
        //水平方向
        RepairX: function (iWidth, mxWidth) {
            iWidth = this.RepairWidth(iWidth, mxWidth);
            if (this.Scale) {
                var iHeight = this.RepairScaleHeight(iWidth);
                if (this.Max && iHeight > this._mxScaleHeight) {
                    iHeight = this._mxScaleHeight;
                    iWidth = this.RepairScaleWidth(iHeight);
                } else if (this.Min && iHeight < this.minHeight) {
                    var tWidth = this.RepairScaleWidth(this.minHeight);
                    if (tWidth < mxWidth) {
                        iHeight = this.minHeight;
                        iWidth = tWidth;
                    }
                }
                this._styleHeight = iHeight;
                this._styleTop = this._scaleTop - iHeight / 2;
            }
            this._styleWidth = iWidth;
        },
        //垂直方向
        RepairY: function (iHeight, mxHeight) {
            iHeight = this.RepairHeight(iHeight, mxHeight);
            if (this.Scale) {
                var iWidth = this.RepairScaleWidth(iHeight);
                if (this.Max && iWidth > this._mxScaleWidth) {
                    iWidth = this._mxScaleWidth;
                    iHeight = this.RepairScaleHeight(iWidth);
                } else if (this.Min && iWidth < this.minWidth) {
                    var tHeight = this.RepairScaleHeight(this.minWidth);
                    if (tHeight < mxHeight) {
                        iWidth = this.minWidth;
                        iHeight = tHeight;
                    }
                }
                this._styleWidth = iWidth;
                this._styleLeft = this._scaleLeft - iWidth / 2;
            }
            this._styleHeight = iHeight;
        },
        //对角方向
        RepairAngle: function (iWidth, mxWidth, iHeight, mxHeight) {
            iWidth = this.RepairWidth(iWidth, mxWidth);
            if (this.Scale) {
                iHeight = this.RepairScaleHeight(iWidth);
                if (this.Max && iHeight > mxHeight) {
                    iHeight = mxHeight;
                    iWidth = this.RepairScaleWidth(iHeight);
                } else if (this.Min && iHeight < this.minHeight) {
                    var tWidth = this.RepairScaleWidth(this.minHeight);
                    if (tWidth < mxWidth) {
                        iHeight = this.minHeight;
                        iWidth = tWidth;
                    }
                }
            } else {
                iHeight = this.RepairHeight(iHeight, mxHeight);
            }
            this._styleWidth = iWidth;
            this._styleHeight = iHeight;
        },
        //top
        RepairTop: function () {
            this._styleTop = this._fixTop - this._styleHeight;
        },
        //left
        RepairLeft: function () {
            this._styleLeft = this._fixLeft - this._styleWidth;
        },
        //height
        RepairHeight: function (iHeight, mxHeight) {
            iHeight = Math.min(this.Max ? mxHeight : iHeight, iHeight);
            iHeight = Math.max(this.Min ? this.minHeight : iHeight, iHeight, 0);
            return iHeight;
        },
        //width
        RepairWidth: function (iWidth, mxWidth) {
            iWidth = Math.min(this.Max ? mxWidth : iWidth, iWidth);
            iWidth = Math.max(this.Min ? this.minWidth : iWidth, iWidth, 0);
            return iWidth;
        },
        //比例高度
        RepairScaleHeight: function (iWidth) {
            return Math.max(Math.round((iWidth + this._borderX) / this.Ratio - this._borderY), 0);
        },
        //比例宽度
        RepairScaleWidth: function (iHeight) {
            return Math.max(Math.round((iHeight + this._borderY) * this.Ratio - this._borderX), 0);
        },
        //转向程序
        //转右
        TurnRight: function (fun) {
            if (!(this.Min || this._styleWidth)) {
                this._fun = fun;
                this._sideLeft = this._sideRight;
                this.Max && this._mxSet();
                return true;
            }
        },
        //转左
        TurnLeft: function (fun) {
            if (!(this.Min || this._styleWidth)) {
                this._fun = fun;
                this._sideRight = this._sideLeft;
                this._fixLeft = this._styleLeft;
                this.Max && this._mxSet();
                return true;
            }
        },
        //转上
        TurnUp: function (fun) {
            if (!(this.Min || this._styleHeight)) {
                this._fun = fun;
                this._sideDown = this._sideUp;
                this._fixTop = this._styleTop;
                this.Max && this._mxSet();
                return true;
            }
        },
        //转下
        TurnDown: function (fun) {
            if (!(this.Min || this._styleHeight)) {
                this._fun = fun;
                this._sideUp = this._sideDown;
                this.Max && this._mxSet();
                return true;
            }
        },
        //停止缩放
        Stop: function () {
            removeEventHandler(document, "mousemove", this._fR);
            removeEventHandler(document, "mouseup", this._fS);
            if (isIE) {
                removeEventHandler(this._obj, "losecapture", this._fS);
                this._obj.releaseCapture();
            } else {
                removeEventHandler(window, "blur", this._fS);
            }
        }
    };

//拖放程序
    var Drag = Class.create();
    Drag.prototype = {
        //拖放对象
        initialize: function (drag, options) {
            this.Drag = drag.get(0);//拖放对象
            this._x = this._y = 0;//记录鼠标相对拖放对象的位置
            this._marginLeft = this._marginTop = 0;//记录margin
            //事件对象(用于绑定移除事件)
            this._fM = BindAsEventListener(this, this.Move);
            this._fS = Bind(this, this.Stop);

            this.SetOptions(options);

            this.Limit = !!this.options.Limit;
            this.mxLeft = parseInt(this.options.mxLeft);
            this.mxRight = parseInt(this.options.mxRight);
            this.mxTop = parseInt(this.options.mxTop);
            this.mxBottom = parseInt(this.options.mxBottom);

            this.LockX = !!this.options.LockX;
            this.LockY = !!this.options.LockY;
            this.Lock = !!this.options.Lock;

            this.onStart = this.options.onStart;
            this.onMove = this.options.onMove;
            this.onStop = this.options.onStop;

            this._Handle = $(this.options.Handle).get(0) || this.Drag;
            this._mxContainer = $(this.options.mxContainer).get(0) || null;

            this.Drag.style.position = "absolute";
            //透明
            if (isIE && !!this.options.Transparent) {
                //填充拖放对象
                with (this._Handle.appendChild(document.createElement("div")).style) {
                    width = height = "100%";
                    backgroundColor = "#fff";
                    filter = "alpha(opacity:0)";
                    fontSize = 0;
                }
            }
            //修正范围
            this.Repair();
            addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));
        },
        //设置默认属性
        SetOptions: function (options) {
            this.options = {
                Handle: "",//设置触发对象（不设置则使用拖放对象）
                Limit: false,//是否设置范围限制(为true时下面参数有用,可以是负数)
                mxLeft: 0,//左边限制
                mxRight: 9999,//右边限制
                mxTop: 0,//上边限制
                mxBottom: 9999,//下边限制
                mxContainer: "",//指定限制在容器内
                LockX: false,//是否锁定水平方向拖放
                LockY: false,//是否锁定垂直方向拖放
                Lock: false,//是否锁定
                Transparent: false,//是否透明
                onStart: function () {
                },//开始移动时执行
                onMove: function () {
                },//移动时执行
                onStop: function () {
                }//结束移动时执行
            };
            Extend(this.options, options || {});
        },
        //准备拖动
        Start: function (oEvent) {
            if (this.Lock) {
                return;
            }
            this.Repair();
            //记录鼠标相对拖放对象的位置
            this._x = oEvent.clientX - this.Drag.offsetLeft;
            this._y = oEvent.clientY - this.Drag.offsetTop;
            //记录margin
            this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
            this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;
            //mousemove时移动 mouseup时停止
            addEventHandler(document, "mousemove", this._fM);
            addEventHandler(document, "mouseup", this._fS);
            if (isIE) {
                //焦点丢失
                addEventHandler(this._Handle, "losecapture", this._fS);
                //设置鼠标捕获
                this._Handle.setCapture();
            } else {
                //焦点丢失
                addEventHandler(window, "blur", this._fS);
                //阻止默认动作
                oEvent.preventDefault();
            }
            ;
            //附加程序
            this.onStart();
        },
        //修正范围
        Repair: function () {
            if (this.Limit) {
                //修正错误范围参数
                this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
                this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
                //如果有容器必须设置position为relative或absolute来相对或绝对定位，并在获取offset之前设置
                !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative");
            }
        },
        //拖动
        Move: function (oEvent) {
            //判断是否锁定
            if (this.Lock) {
                this.Stop();
                return;
            }
            ;
            //清除选择
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            //设置移动参数
            var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
            //设置范围限制
            if (this.Limit) {
                //设置范围参数
                var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
                //如果设置了容器，再修正范围参数
                if (!!this._mxContainer) {
                    mxLeft = Math.max(mxLeft, 0);
                    mxTop = Math.max(mxTop, 0);
                    mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
                    mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
                }
                ;
                //修正移动参数
                iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
                iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
            }
            //设置位置，并修正margin
            if (!this.LockX) {
                this.Drag.style.left = iLeft - this._marginLeft + "px";
            }
            if (!this.LockY) {
                this.Drag.style.top = iTop - this._marginTop + "px";
            }
            //附加程序
            this.onMove();
        },
        //停止拖动
        Stop: function () {
            //移除事件
            removeEventHandler(document, "mousemove", this._fM);
            removeEventHandler(document, "mouseup", this._fS);
            if (isIE) {
                removeEventHandler(this._Handle, "losecapture", this._fS);
                this._Handle.releaseCapture();
            } else {
                removeEventHandler(window, "blur", this._fS);
            }
            ;
            //附加程序
            this.onStop();
        }
    };
    // design.js
    // js
    function bindEvents(obj) {

        var index = obj.attr('index');

        var rs = new Resize(obj, {
            Max: true,
            mxContainer: "#poster"
        });
        rs.Set($(".rRightDown", obj), "right-down");
        rs.Set($(".rLeftDown", obj), "left-down");
        rs.Set($(".rRightUp", obj), "right-up");
        rs.Set($(".rLeftUp", obj), "left-up");
        rs.Set($(".rRight", obj), "right");
        rs.Set($(".rLeft", obj), "left");
        rs.Set($(".rUp", obj), "up");
        rs.Set($(".rDown", obj), "down");
        rs.Scale = true;
        var type = obj.attr('type');
        if (type == 'nickname' || type == 'img' || type == 'title' || type == 'marketprice' || type ==
            'productprice' || type == 'ptime' || type == 'words' || type == 'wx' || type == 'level' || type == 'phone') {
            rs.Scale = false;
        }
        new Drag(obj, {
            Limit: true,
            mxContainer: "#poster"
        });
        $('.drag .remove').unbind('click').click(function () {
            $(this).parent().remove();
        })

        $.contextMenu({
            selector: '.drag[index=' + index + ']',
            callback: function (key, options) {
                var index = parseInt($(this).attr('zindex'));

                if (key == 'next') {
                    var nextdiv = $(this).next('.drag');
                    if (nextdiv.length > 0) {
                        nextdiv.insertBefore($(this));
                    }
                } else if (key == 'prev') {
                    var prevdiv = $(this).prev('.drag');
                    if (prevdiv.length > 0) {
                        $(this).insertBefore(prevdiv);
                    }
                } else if (key == 'last') {
                    var len = $('.drag').length;
                    if (index >= len - 1) {
                        return;
                    }
                    var last = $('#poster .drag:last');
                    if (last.length > 0) {
                        $(this).insertAfter(last);
                    }
                } else if (key == 'first') {
                    var index = $(this).index();
                    if (index <= 1) {
                        return;
                    }
                    var first = $('#poster .drag:first');
                    if (first.length > 0) {
                        $(this).insertBefore(first);
                    }
                } else if (key == 'delete') {
                    $(this).remove();
                }
                var n = 1;
                $('.drag').each(function () {
                    $(this).css("z-index", n);
                    n++;
                })
            },
            items: {
                "next": {
                    name: "调整到上层"
                },
                "prev": {
                    name: "调整到下层"
                },
                "last": {
                    name: "调整到最顶层"
                },
                "first": {
                    name: "调整到最低层"
                },
                "delete": {
                    name: "删除元素"
                }
            }
        });
        obj.unbind('click').click(function () {
            bind($(this));
        })


    }

    var imgsettimer = 0;
    var nametimer = 0;
    var bgtimer = 0;
    var wordtimer = 0;

    function clearTimers() {
        clearInterval(imgsettimer);
        clearInterval(nametimer);
        clearInterval(bgtimer);
        clearInterval(wordtimer);
    }

    function bind(obj) {
        var imgset = $('#imgset'),
            nameset = $("#nameset"),
            qrset = $('#qrset');
            wordset = $('#wordset');
        imgset.hide(), nameset.hide(), qrset.hide(),wordset.hide();
        imgset.find(".goods-pic").val('');
        clearTimers();
        var type = obj.attr('type');
        if (type == 'img') {
            imgset.show();
            var src = obj.attr('src');
            var input = imgset.find('input');
            var img = imgset.find('img');
            if (typeof (src) != 'undefined' && src != '') {
                input.val(src);
                img.attr('src', getImgUrl(src));
            }

            imgsettimer = setInterval(function () {
                if (input.val() != src && input.val() != '') {
                    var url = getImgUrl(input.val());

                    obj.attr('src', input.val()).find('img').attr('src', url);
                }
            }, 10);

        } else if (type == 'nickname' || type == 'title' || type == 'marketprice' || type ==
            'productprice' || type == 'ptime' || type == 'wx' || type == 'level' || type == 'phone') {

            nameset.show();
            var color = obj.attr('color') || "#000";
            var size = obj.attr('size') || "14";
            var input = nameset.find('input:first');
            var inputColor = nameset.find('.input-group-addon:first');
            var namesize = nameset.find('#namesize');
            var picker = nameset.find('.sp-preview-inner');
            input.val(color);
            inputColor.css("background-color", color);
            namesize.val(size.replace("px", ""));
            picker.css({
                'background-color': color,
                'font-size': size
            });

            nametimer = setInterval(function () {
                obj.attr('color', input.val()).find('.text').css('color', input.val());
                obj.attr('size', namesize.val()).find('.text').css('font-size',
                    namesize.val() + "px");
            }, 10);

        } else if (type == 'qr') {
            qrset.show();
            var size = obj.attr('size') || "3";
            var sel = qrset.find('#qrsize');
            sel.val(size);
            sel.unbind('change').change(function () {
                obj.attr('size', sel.val())
            });
        } else if (type == 'words'){
            wordset.show();
            var color = obj.attr('color') || "#000";
            var size = obj.attr('size') || "14";
            var input = wordset.find('input:first');
            var inputColor = wordset.find('.input-group-addon:first');
            var namesize = wordset.find('#namesize1');
            var picker = wordset.find('.sp-preview-inner');
            var contents = obj.attr('content') || "文字内容";
            var contentVal = wordset.find('#wordContent');
            contentVal.val(contents);
            input.val(color);
            inputColor.css("background-color", color);
            namesize.val(size.replace("px", ""));
            picker.css({
                'background-color': color,
                'font-size': size
            });

            wordtimer = setInterval(function () {
                obj.attr('color', input.val()).find('.text').css('color', input.val());
                obj.attr('size', namesize.val()).find('.text').css('font-size',namesize.val() + "px");
                obj.attr('content', contentVal.val()).find('.text').html(contentVal.val());
            }, 10);
        }
    }

    function getImgUrl(val) {

        if (val.indexOf('http://') == -1) {
            // val = "http://pic.vslai1.com/" + val;
        }
        return val;
    }

    function initPoster(data) {
        if (!util.isEmpty(data)) {
            $('#poster .bg').attr('src', data.bg);
            $('#poster .bg').attr('data-id', data.bg_id);
            $('input[name=bg]').val(data.bg)
            if (!util.isEmpty(data.items)) {
                $.each(data.items, function (k, v) {
                    var img_html = "";
                    if (v.type == 'qr' || v.type == 'head' || v.type == 'img' || v.type == 'thumb') {
                        img_html = '<img src="' + v.img + '" />';
                    } else {
                        img_html = '<div class=text style="color: ' + v.color + '; font-size: ' + v.size + 'px;">' + v.string + '</div>';
                    }
                    var obj = $('<div class="drag" type="' + v.type + '" index="' + v.index +
                        '" style="' + v.style + '" color="' + v.color + '" size="' + v.size + '" src="' + v.img + '">' + img_html +
                        '<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>'
                    );

                    $('#poster').append(obj);
                    bindEvents(obj);
                })
            }
        }
    }

    function posterData() {
        var poster_data = {}
        poster_data.bg = $("#poster .bg").attr('src')
        poster_data.bg_id = $("#poster .bg").data('id');
        // console.log(poster_data.bg)
        poster_data.items = []
        $('#poster .drag').each(function () {
            var $this = $(this);
            var item = {};

            item.index = $this.attr('index')
            item.type = $this.attr('type')
            item.style = $this.attr('style')
            item.size = $this.attr('size')
            item.color = $this.attr('color')
            if (item.type == 'img' || item.type == 'qr' || item.type == 'head' || item.type == 'thumb') {
                item.img = $this.children('img').attr('src')
            } else {
                item.string = $this.children('.text').html()
            }
            item.from_top = $this.css('top').replace('px', '')
            item.from_left = $this.css('left').replace('px', '')
            item.width = $this.css('width').replace('px', '') || 80
            item.height = $this.css('height').replace('px', '') || 80
            poster_data.items.push(item)
        })
        // console.log(poster_data)
        return poster_data
    }

    // js
    //颜色选择器
    $(".colorpicker").each(function () {
        var elm = this;
        util.colorpicker(elm, function (color) {
            $(elm).parent().prev().prev().val(color.toHexString());
            $(elm).parent().prev().css("background-color", color.toHexString());
        });
    });
    // 参照底图的图片空间
    $('body').on('click', '[data-toggle="editPosterPicture"]', function () {
        var _this = $(this);
        util.pictureDialog(_this, false, function (content) {
            _this.parent().prev().val(content.path[0]);
            $('.bg').attr('src', content.path[0]);
            $('.bg').attr('data-id', content.id[0]);
        })
    });
    //参照底图清除
    $('.clearPic').on('click', function () {
        $(this).parent().prev().val('');
        $('.bg').attr('src', '');
        $('.bg').attr('data-id', '');
    })
    // "图片"的图片空间
    $('body').on('click', '[data-toggle="editPosterPicture1"]', function () {
        var _this = $(this);
        util.pictureDialog(_this, false, function (content) {
            _this.parent().prev().val(content.path[0]);
            // $('.bg').attr('data-id',content.id[0]);
        })
    });
    // "图片"的清除
    $('.clearPic1').on('click', function () {
        $(this).parent().prev().val(" ");
    })

    $('.btn-com').click(function () {

        var imgset = $('#imgset'),
            nameset = $("#nameset"),
            qrset = $('#qrset');
            wordset = $('#wordset');
        imgset.hide(), nameset.hide(), qrset.hide(), wordset.hide();
        imgset.find(".goods-pic").val('');
        clearTimers();

        if ($('#poster img').length <= 0) {
            //alert('请选择背景图片!');
            //return;
        }
        var type = $(this).data('type');
        var img = "";
        if (type == 'qr') {
            img = '<img src="/public/static/images/poster/poster_code.png" style="width:100%;height:100%" />';
        } else if (type == 'head') {
            img = '<img src="/public/static/images/poster/poster_head.png" style="width:100%;height:100%" />';
        } else if (type == 'img' || type == 'thumb') {
            img = '<img src="/public/static/images/poster/poster_pic.png" style="width:100%;height:100%" />';
        } else if (type == 'nickname') {
            img = '<div class="text">昵称</div>';
        } else if (type == 'title') {
            img = '<div class="text">商品名称</div>';
        } else if (type == 'marketprice') {
            img = '<div class="text">商品现价</div>';
        } else if (type == 'productprice') {
            img = '<div class="text">商品原价</div>';
        } else if (type == 'ptime') {
            img = '<div class="text">Y-m-d H:i:s</div>';
        } else if (type == 'words') {
            img = '<div class="text">文字内容</div>';
        } else if (type == 'wx') {
            img = '<div class="text">微信号</div>';
        } else if (type == 'level') {
            img = '<div class="text">等级</div>';
        } else if (type == 'phone') {
            img = '<div class="text">手机号</div>';
        }
        var index = $('#poster .drag').length + 1;
        if(type == 'nickname' || type == 'productprice' || type == 'marketprice' || type == 'title'){
            var obj = $('<div class="drag" type="' + type + '" index="' + index +
                '" style="z-index:' + index + '" color="#000" size="14">' + img +
                '<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>'
            );
        }else{
            var obj = $('<div class="drag" type="' + type + '" index="' + index +
                '" style="z-index:' + index + '">' + img +
                '<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>'
            );
        }


        $('#poster').append(obj);
        bindEvents(obj);

    });

    return {
        initPoster: initPoster,
        posterData: posterData
    }
})
